<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>范振宇 - Java Web实验导航</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">

  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            secondary: '#10B981',
            accent: '#8B5CF6',
            dark: '#1E293B',
            light: '#F8FAFC'
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
      }
      .nav-item {
        @apply relative px-4 py-2 overflow-hidden text-gray-700 transition-all duration-300 hover:text-white;
      }
      .nav-item::before {
        content: '';
        @apply absolute inset-0 z-0 w-full h-0 bg-primary transition-all duration-300 ease-out;
      }
      .nav-item:hover::before {
        @apply h-full;
      }
      .nav-item span {
        @apply relative z-10;
      }
    }
  </style>
</head>
<body class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 font-inter">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-md sticky top-0 z-50">
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
    <div class="flex items-center space-x-3">
      <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-accent flex items-center justify-center">
        <i class="fa fa-graduation-cap text-white"></i>
      </div>
      <h1 class="text-xl md:text-2xl font-bold text-dark">
        <span class="text-primary">范振宇</span> - Java Web课程实验导航
      </h1>
    </div>
    <div class="hidden md:flex items-center space-x-2">
      <span class="text-sm text-gray-500">学号：2313042124</span>
      <div class="w-2 h-2 rounded-full bg-green-500"></div>
    </div>
  </div>
</header>

<!-- 主内容区 -->
<main class="container mx-auto px-4 py-8 md:py-12">
  <div class="text-center mb-10">
    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4 text-shadow">
      请选择要演示的功能
    </h2>
    <p class="text-gray-600 max-w-2xl mx-auto">
      这里展示了本学期的所有实验项目，点击下方卡片查看相应的实验内容
    </p>
  </div>

  <!-- 功能卡片网格 -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

    <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover">
      <div class="h-4 bg-gradient-to-r from-red-600 to-rose-500"></div>
      <div class="p-6">
        <div class="flex items-center mb-4">
          <div class="w-12 h-12 rounded-lg bg-red-100 flex items-center justify-center mr-4">
            <i class="fa fa-flask text-red-600 text-xl"></i>
          </div>
          <h3 class="text-lg font-semibold text-dark">实验一</h3>
        </div>
        <ul class="space-y-2">
          <li class="nav-item rounded-lg">
            <a href="main.html" class="flex items-center">
              <i class="fa fa-home mr-2"></i>
              <span>网站首页</span>
            </a>
          </li>
          <li class="nav-item rounded-lg">
            <a href="news.html" class="flex items-center">
              <i class="fa fa-home mr-2"></i>
              <span>新闻列表</span>
            </a>
          </li>
          <li class="nav-item rounded-lg">
            <a href="CV.html" class="flex items-center">
              <i class="fa fa-sign-in mr-2"></i>
              <span>注册界面设计</span>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 实验二卡片 -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover">
      <div class="h-4 bg-gradient-to-r from-primary to-blue-400"></div>
      <div class="p-6">
        <div class="flex items-center mb-4">
          <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center mr-4">
            <i class="fa fa-flask text-primary text-xl"></i>
          </div>
          <h3 class="text-lg font-semibold text-dark">实验二</h3>
        </div>
        <ul class="space-y-2">
          <li class="nav-item rounded-lg">
            <a href="Welcome" class="flex items-center">
              <i class="fa fa-home mr-2"></i>
              <span>欢迎页面</span>
            </a>
          </li>
          <li class="nav-item rounded-lg">
            <a href="form.html" class="flex items-center">
              <i class="fa fa-cog mr-2"></i>
              <span>表单处理</span>
            </a>
          </li>
          <li class="nav-item rounded-lg">
            <a href="config" class="flex items-center">
              <i class="fa fa-cog mr-2"></i>
              <span>配置参数</span>
            </a>
          </li>
          <li class="nav-item rounded-lg">
            <a href="login.html" class="flex items-center">
              <i class="fa fa-sign-in mr-2"></i>
              <span>用户登录</span>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 实验三卡片 -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover">
      <div class="h-4 bg-gradient-to-r from-accent to-purple-400"></div>
      <div class="p-6">
        <div class="flex items-center mb-4">
          <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mr-4">
            <i class="fa fa-flask text-accent text-xl"></i>
          </div>
          <h3 class="text-lg font-semibold text-dark">实验三</h3>
        </div>
        <ul class="space-y-2">
          <li class="nav-item rounded-lg">
            <a href="register.html" class="flex items-center">
              <i class="fa fa-user-plus mr-2"></i>
              <span>用户注册</span>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 实验三、四卡片 -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover">
      <div class="h-4 bg-gradient-to-r from-secondary to-green-400"></div>
      <div class="p-6">
        <div class="flex items-center mb-4">
          <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center mr-4">
            <i class="fa fa-flask text-secondary text-xl"></i>
          </div>
          <h3 class="text-lg font-semibold text-dark">实验三、四</h3>
        </div>
        <ul class="space-y-2">
          <li class="nav-item rounded-lg">
            <a href="newsList" class="flex items-center">
              <i class="fa fa-cog mr-2"></i>
              <span>新闻列表管理</span>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 实验五卡片 -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover">
      <div class="h-4 bg-gradient-to-r from-amber-500 to-orange-400"></div>
      <div class="p-6">
        <div class="flex items-center mb-4">
          <div class="w-12 h-12 rounded-lg bg-amber-100 flex items-center justify-center mr-4">
            <i class="fa fa-flask text-amber-500 text-xl"></i>
          </div>
          <h3 class="text-lg font-semibold text-dark">实验五</h3>
        </div>
        <ul class="space-y-2">
          <li class="nav-item rounded-lg">
            <a href="GetAllEmployeeServlet" class="flex items-center">
              <i class="fa fa-cog mr-2"></i>
              <span>MVC员工查询</span>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 实验六卡片 -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover">
      <div class="h-4 bg-gradient-to-r from-blue-600 to-cyan-500"></div>
      <div class="p-6">
        <div class="flex items-center mb-4">
          <div class="w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center mr-4">
            <i class="fa fa-flask text-amber-500 text-xl"></i>
          </div>
          <h3 class="text-lg font-semibold text-dark">实验六</h3>
        </div>
        <ul class="space-y-2">
          <li class="nav-item rounded-lg">
            <a href="GetAllEmployeeServlet" class="flex items-center">
              <i class="fa fa-users mr-2"></i>
              <span>MVC员工管理</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</main>

<!-- 页脚 -->
<footer class="bg-dark text-white py-8 mt-12">
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row justify-between items-center">
      <div class="mb-4 md:mb-0">
        <h3 class="text-lg font-semibold mb-2">范振宇</h3>
        <p class="text-gray-400 text-sm">学号：2313042124</p>
      </div>
      <div class="text-gray-400 text-sm">
        <p>© 2025 中北大学Java Web实验导航系统 | 范振宇所有权利保留</p>
      </div>
    </div>
  </div>
</footer>

<script>
  // 添加页面加载动画
  document.addEventListener('DOMContentLoaded', () => {
    document.body.classList.add('opacity-0');
    setTimeout(() => {
      document.body.classList.add('transition-opacity', 'duration-500');
      document.body.classList.remove('opacity-0');
    }, 100);

    // 导航项动画效果
    const navItems = document.querySelectorAll('.nav-item');
    navItems.forEach(item => {
      item.addEventListener('mouseenter', () => {
        const icon = item.querySelector('i');
        if (icon) {
          icon.classList.add('animate-pulse');
          setTimeout(() => {
            icon.classList.remove('animate-pulse');
          }, 500);
        }
      });
    });
  });
</script>
</body>
</html>
    